<template>
  <div>
    <div class="public-title">团队信息</div>
    <div class="m-userInfo">
      <div class="info f-left">
        <div class="infoWrap"><a class="avatar f-left" target="_blank"><img width="66" src="../../../assets/img/mange/crm-head.png"></a>
          <div class="name">
            <div class="nickname"><a>贤心</a></div><a class="w-levelname" target="_blank" data-reactid=".3.0.0.0.0.1.1"><noscript data-reactid=".3.0.0.0.0.1.1.0"></noscript><span class="w-icon-member member-top-vip0" data-reactid=".3.0.0.0.0.1.1.1"></span></a>
          </div>
        </div>
        <div class="growWrap">
          <div class="growNum"><span><a>简介 &gt;&gt;</a></span></div>
          <div class="process">
            巴拉巴拉小魔仙巴拉巴拉小魔仙
          </div><noscript></noscript><a class="w-levelname" target="_blank"><span class="w-icon-member member-top-vip0" data-reactid=".3.0.0.0.1.3.0"></span></a>
        </div>
      </div>
      <div class="asset f-left">
        <div class="item">
          <div class="label">职业证书编号</div>
          <div class="content"><a href="http://iir.circ.gov.cn/web/" target="_blank"><span>25684669562</span></a></div>
        </div>
        <div class="item">
          <div class="label">人数</div>
          <div class="content"><a target="_blank"><span>20</span></a></div>
        </div>
        <div class="item">
          <div class="label">电话</div>
          <div class="content"><a target="_blank"><span>18769526199</span></a><i class="w-icon-common icon-common-open-eye" data-reactid=".3.0.0.1.3.1.1"></i></div>
        </div>
        <div class="item">
          <div class="label">地区</div>
          <div class="content"><a target="_blank">山东 济南</a></div>
        </div>
        <!-- <div class="item" >
                    <div class="label" >待领礼包</div>
                    <div class="content" ><a href="/membership/index" target="_blank" ><span>0</span><span >个</span></a></div>
                </div> -->
      </div>
      <div class="code-img">
        <img src="../../../assets/img/mange/code.jpg" alt="">
      </div>
    </div>
    <br>
    <div class="public-title">信息设置</div>
    <Tabs type="card">
      <TabPane label="团队资料">
        <Form id="formPerson" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem label="头像" prop="name">
            <a class="up-head-img"><img width="66" src="../../../assets/img/mange/crm-head.png"></a>
          </FormItem>
          <FormItem label="手机号码" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name" disabled></Input>
          </FormItem>
          <FormItem label="姓名" prop="mail">
            <Input size='large' v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
          </FormItem>
          <FormItem label="身份证" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="工号" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="微信号码" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="职业证书编号" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem label="主营险种" prop="city">
            <Select size='large' v-model="formValidate.city" placeholder="Select your city">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="所属公司" prop="city">
            <Select size='large' v-model="formValidate.city" placeholder="Select your city">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="手机号码" prop="name">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>

          <FormItem label="个人简介" prop="desc">
            <Input size='large' v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button size='large' @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="转发封面">
        <Form id="formForword" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem prop="name" label="转发标题">
            <Input size='large' v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
            </Input>
          </FormItem>
          <FormItem label="转发封面" prop="name">
            <div class="crm-list">
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem label="系统封面" prop="name">
            <div class="crm-list">
              <Card @click.native="customIview" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formInline')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="团队秀">
        <br>
        <Form id="formShow" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem label="团队秀封面" prop="name">
            <div class="crm-list">
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem prop="name" label="这一刻想法">
            <Input size='large' v-model="formValidate.desc" type="textarea" :autosize="{minRows: 1,maxRows: 4}" placeholder="Enter something..."></Input>
            </Input>
          </FormItem>
          <FormItem label="团队秀相片" prop="name">
            <div class="crm-list">
              <Card @click.native="customIview" style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
              <Card style="width:158px">
                <div style="text-align:center">
                  <img class="default-head" src="../../../assets/img/mange/crm-head.png">
                </div>
              </Card>
            </div>
          </FormItem>
          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formInline')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="修改密码">
        <br>
        <Form id="formPass" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem prop="name" label="原密码">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem prop="name" label="新密码">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>
          <FormItem prop="name" label="重复新密码">
            <Input size='large' v-model="formValidate.name" placeholder="Enter your name"></Input>
          </FormItem>

          <FormItem>
            <Button size='large' type="primary" @click="handleSubmit('formInline')">提交</Button>
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formValidate: {
        name: "",
        mail: "",
        city: "",
        gender: "",
        interest: [],
        date: "",
        time: "",
        desc: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        mail: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          },
          { type: "email", message: "Incorrect email format", trigger: "blur" }
        ],
        city: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change"
          }
        ],
        gender: [
          { required: true, message: "Please select gender", trigger: "change" }
        ],
        interest: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "Choose at least one hobby",
            trigger: "change"
          },
          {
            type: "array",
            max: 2,
            message: "Choose two hobbies at best",
            trigger: "change"
          }
        ],
        date: [
          {
            required: true,
            type: "date",
            message: "Please select the date",
            trigger: "change"
          }
        ],
        time: [
          {
            required: true,
            type: "string",
            message: "Please select time",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: true,
            message: "Please enter a personal introduction",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "Introduce no less than 20 words",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    // 预览封面模板
    customIview() {
      this.$Modal.confirm({
        title: "模板一",
        closable: true,
        width: "520",
        content: `<p><img src ="${"http://www.sinelinked.com/static/other/pic-bg1.jpg"}"  /></p>`,
        okText: "选择此模板",
        cancelText: "取消"
      });
    }
  }
};
</script>

<style scoped>
.m-userInfo {
  padding: 30px 0;
  border: 1px solid #eaeaea;
  font-size: 14px;
  overflow: hidden;
  position: relative;
}

.m-userInfo:after,
.m-userInfo:before {
  content: " ";
  display: table;
}

.m-userInfo .info {
  width: 281px;
  padding-left: 28px;
  border-right: 1px dashed #d2d2d2;
}

.m-userInfo .info .infoWrap {
  margin: 3px 0 17px;
}

.m-userInfo .info .infoWrap .avatar {
  display: inline-block;
  margin-right: 16px;
  border: 2px solid #f1f1f1;
  border-radius: 50%;
  height: 70px;
}

.m-userInfo .info .infoWrap .avatar img {
  border-radius: 50%;
}

.m-userInfo .info .infoWrap .name {
  height: 70px;
  display: table-cell;
  vertical-align: middle;
}

.m-userInfo .asset .item:after,
.m-userInfo .asset .item:before,
.m-userInfo .info .growWrap .growNum:after,
.m-userInfo .info .growWrap .growNum:before {
  display: table;
  content: " ";
}

.m-userInfo .info .infoWrap .name .nickname {
  margin-bottom: 8px;
  max-width: 134px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-userInfo .info .growWrap {
  width: 220px;
}

.m-userInfo .info .growWrap .growNum {
  margin-bottom: 9px;
}

.m-userInfo .info .growWrap .process {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 19px;
}

.m-userInfo .info .growWrap .process .num {
  height: 8px;
  background-color: #bea988;
}

.m-userInfo .asset {
  width: 550px;
  padding-left: 50px;
}

.m-userInfo .asset .item {
  /* float: left; */
  width: 240px;
  line-height: 36px;
  overflow: hidden;
}

.m-userInfo .asset .item .label {
  float: left;
  width: 88px;
  margin-right: 20px;
  text-align: left;
}

.m-userInfo .asset .item .content {
  float: left;
}

.m-userInfo .icon-common-close-eye,
.m-userInfo .icon-common-open-eye {
  vertical-align: -6px;
  margin-left: 9px;
  cursor: pointer;
}
.code-img {
  position: absolute;
  width: 200px;
  right: 30px;
  top: 9px;
}
.code-img img {
  width: 100%;
}
.f-left {
  float: left;
}
/* formPerson */
#formPerson {
  margin-top: 20px;
  width: 60%;
  padding-left: 40px;
}
#formPerson >>> .ivu-form-item-label {
  text-align: left !important;
}
.up-head-img {
  width: 70px;
}
.up-head-img img {
  border-radius: 50%;
}
/* formForword */
#formForword {
  margin-top: 20px;
  padding-left: 40px;
  width: 62%;
}
#formForword >>> .ivu-form-item-label {
  text-align: left !important;
}
/* .crm-list  */
.crm-list {
  display: flex;
  flex-wrap: wrap;
}
.crm-list .ivu-card {
  margin-right: 10px;
  margin-bottom: 10px;
}
.crm-list .default-head {
  border-radius: 50%;
  width: 65px;
}
#formShow,
#formPass {
  width: 62%;
}
#formShow {
  margin-top: 20px;
  padding-left: 40px;
}
#formShow >>> .ivu-form-item-label {
  text-align: left !important;
}
#formPass {
  margin-top: 20px;
  padding-left: 40px;
}
#formPass >>> .ivu-form-item-label {
  text-align: left !important;
}
</style>